<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view>
		<!-- 顶部导航 -->
		<custom-nav-tabs :tabs="['点赞 👍', '最近看过']" default-index="1" :BgColor='1' :defaultIndex="activeTab"
			@change="onTabChange">
			<!-- 可自定义左侧图标 -->
			<template #left>
				<view class="nav-left">
					<view style="padding-right: 40rpx;" @click="onperson(1)">
						<uni-icons type="back" size="28" color="#ff0000" />
					</view>
					<view @click="onperson('/pages/of_play/search/search')">
						<uni-icons type="search" size="28" color="#ff0000" />
					</view>
				</view>
			</template>
			<!-- 可自定义右侧内容 -->
			<template #right>
				<view style="width: 60rpx;"></view>
			</template>
		</custom-nav-tabs>
		<!-- 页面内容 -->
		<view class="video-swiper" v-if="activeTab === 0">
			<view style="width: 100%; height: 180rpx;"></view>

			<view class="image-eight-Three">
				<my-img-y-Three class="item" v-for="(item , index) in collentValue" :index="index"
					:key="item?.collection[0]?.id" :images="item?.collection[0]?.imageUrl"
					:tags="item?.collection[0]?.tags" :name="item?.collection[0]?.name"
					:bifen="item?.collection[0]?.bifen" :biao="item?.episode" :episode="item?.collection[0]?.episode"
					:episodes="item?.collection[0]?.episode" :urlId="item?.collection[0]?.id"
					:urlName="`/pages/of_play/play/play?type=wchat&episodes=${item.episode}&`"></my-img-y-Three>
			</view>
		</view>
		<view class="video-swiper" v-if="activeTab === 1">
			<view style="width: 100%; height: 180rpx;"></view>

			<view class="image-eight-Three">
				<my-img-y-Three class="item" :checkbox="checkbox" @checkbox="oncheckbox"
					v-for="(item , index) in collentValue" :index="index" :key="item?.collection[0]?.id"
					:images="item?.collection[0]?.imageUrl" :tags="item?.collection[0]?.tags"
					:name="item?.collection[0]?.name" :bifen="item?.collection[0]?.bifen" :biao="item?.episode"
					:episode="item?.collection[0]?.episode" :episodes="item?.collection[0]?.episode"
					:urlId="item?.collection[0]?.id"
					:urlName="`/pages/of_play/play/play?type=wchat&episodes=${item.episode}&`"></my-img-y-Three>
			</view>

			<view class="deleteB" @click="ondeleteClick">{{deleteContent}}</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavTabs from '@/components/ofPlay/CustomNavTabs.vue'
	import {
		ref
	} from 'vue'
	import {
		findAllCountWatch,
		watchDelete
	} from '@/API/ofPlayApis.js';
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	const loading = ref(true)
	const WUrl = ref('/collectionPlayWatch')
	const CUrl = ref('/collectionPlayCllect')
	const collentValue = ref([]); //收藏的内容
	const deleteContent = ref('编辑'); //编辑按钮初始值
	const checkbox = ref(false); //取消按钮的开关
	const pageNum = ref(1);

	const activeTab = ref(0) //导航栏

	// 获取点赞内容
	const collentFunction = async (page) => {
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		console.log("user信息：", user)
		// #endif

		let all = '/all';
		let url = '';
		if (activeTab.value == 0) {
			url = CUrl.value + all;
		} else {
			url = WUrl.value + all;
		}
		let res = await findAllCountWatch(url, page, 12, 183, '');
		collentValue.value = collentValue.value.concat(res.list);
		console.log(":内容：", res);
		pageNum.value = res.nextPage;
		loading.value = false

	}

	// 点赞，观看记录内容
	collentFunction(pageNum.value);

	// 取消收藏的内容
	const oncheckbox = async (e) => {
		uni.showLoading({
			title: '删除中'
		})
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		// #endif
		// console.log("oncheckbox:", e);
		let item = collentValue.value; // 获取当前的视频数组
		console.log("collentValue.value[e].collection[0].id:", collentValue.value[e]);
		let all = '/delete';
		let url = '';
		if (activeTab.value == 0) {
			url = CUrl.value + all;
		} else {
			url = WUrl.value + all;
		}
		let res = await watchDelete(url, 183, collentValue.value[e].urlId, collentValue.value[e]
			.videoId); //从数据库中删除
		console.log("删除：", res);
		if (res > 0) {
			uni.hideLoading();
			item.splice(e, 1); // 从索引位置删除 1 个元素
			uni.showToast({
				title: "已删除！",
				icon: "none"
			})
		} else {
			uni.hideLoading();
			uni.showToast({
				title: '失败',
				icon: "error"
			})
		}

	}

	// 点击’编辑‘按钮
	function ondeleteClick(e) {
		console.log("点击了")
		if (checkbox.value) {
			checkbox.value = false
			deleteContent.value = '编辑'

		} else {
			checkbox.value = true;
			deleteContent.value = '不了'
		}
	}


	// 导航栏调换函数
	const onTabChange = (index) => {
		activeTab.value = index
		collentValue.value = [];
		pageNum.value = 1;
		// 点赞，观看记录内容
		collentFunction(1);
		loading.value = true
	}
	// 触底刷新
	onReachBottom(() => {
		console.log("触底了");
		if (pageNum.value > 1) {
			collentFunction(pageNum.value);
			console.log("触底刷新了");
		}

	})
	// 图标导航栏
	function onperson(url) {
		if (url == 1) {
			uni.navigateBack({
				delta: 1 // 返回上一个页面
			});
			return;
		}
		console.log(url);
		uni.navigateTo({
			url: url
		})
	}
</script>

<style scoped>
	.image-eight-Three {
		width: 100%;
		position: relative;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);
		border-radius: 20rpx;
	}

	.item {
		overflow: hidden;
		/* 防止内容溢出 */
		position: relative;
		width: 100%;
		/* 图片宽度填充整个容器 */
		height: auto;
		/* 根据宽度自动调整高度 */
		display: block;
		/* 移除图片下方默认的空白间隙 */
		object-fit: cover;
		/* 保证图片完全覆盖容器，可能会裁剪图片 */
	}

	.deleteB {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff0000;
		width: 250rpx;
		height: 80rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-left {
		width: 140rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>